<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('materials.otherOutgoingList')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text"
							style="width:300rpx">{{ $t('materials.receiptNumber') }}</text>
						<view class="gui-form-body gui-text-right">
							<input type="text" class="gui-form-input gui-text-right" v-model="data.oddNum"
								:placeholder="$t('distributedEnter.placeholderText')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text"
							style="width:300rpx">{{ $t('translationImage.documentationDate') }}</text>
						<view class="gui-form-body gui-text-right" @click="dateChoose">
							<view class="gui-form-input gui-text-right" v-if="data.chooseTime.length">
								<text>{{ data.chooseTime[0] }}</text><text v-if="data.chooseTime[1]"> -
									{{ data.chooseTime[1] }}</text>
							</view>
							<input v-else type="button" class="gui-form-input gui-text-right"
								:placeholder="$t('distributedEnter.placeholderTextChoose')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b gui-flex gui-justify-content-center">
						<view class="gui-flex gui-space-between gui-align-items-center"
							style="width: 70%;height: 100rpx;">
							<button type="default" class="gui-button gui-button-mini gui-bg-black4 gui-noborder"
								style="width:200rpx;" @click="reset">
								<text
									class="gui-block gui-color-black gui-button-text-mini gui-icons">{{ $t('distributedEnter.reset') }}</text>
							</button>
							<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
								style="width:200rpx;" @click="search">
								<text
									class="gui-block gui-color-white gui-button-text-mini gui-icons">{{ $t('distributedEnter.search') }}</text>
							</button>
						</view>
					</view>
				</view>
				<!-- 底部显示区域 -->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
					<view style="height: 15rpx"></view>
					<view class="card-boxCustom gui-transition-all" v-for="(x, i) in data.list" :key="i">
						<view class="card-head">
							<text>{{ $t('materials.theDocumentsInformation') }}</text>
						</view>
						<view class="card-body" style="padding-bottom: 15rpx;">
							<view class="card-rotating card-rotating-top"
								@click.stop="data.listShow[i] = !data.listShow[i]">
								<uni-icons v-if="!data.listShow[i]" type="bottom" color="#9C9C9C" size="20"></uni-icons>
								<uni-icons v-if="data.listShow[i]" type="top" color="#9C9C9C" size="20"></uni-icons>
							</view>
							<view class="card-mini-head">
								<view class="title-line"></view>
								<text>{{$t('translationImage.serialNumber')}}：{{i+1}}</text>
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{ $t('materials.receiptNumber') }}：</text>{{ x.FBILLNO }}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{ $t('translationImage.documentationDate') }}：</text>
								{{ x.DATE }}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{ $t('hardware.receiptsQty') }}：</text> {{ x.total }}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{ $t('distributedEnter.compiler') }}：</text> {{ x.users }}
							</view>

						</view>
						<view class="card-body-folding" v-show="data.listShow[i]">
							<view class="gui-border-t gui-padding" v-for="(k, index) in x.child" :key="index">
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('distributedEnter.materialCode') }}：</text>
									{{ k.FNUMBER }}
								</view>
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('distributedEnter.materialName') }}：</text>
									{{ k.FNAME }}
								</view>
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('stockManage.materialUnit') }}：</text> {{ k.unit }}
								</view>
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('distributedEnter.materialQty') }}：</text>
									{{ k.qty }}
								</view>
							</view>
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>
			<calendarCustom ref="calendarCustomRef" @setTime="getTime" :selectTime="data.chooseTime"></calendarCustom>
		</template>
	</gui-page>
</template>
<script setup>
import searchCustom from '@/components/searchCustom';
import calendarCustom from '@/components/calendarCustom';
import superweiCombox from '@/components/superweiCombox';
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import graceJS from "@/Grace6/js/grace.js";
import { navigate } from '@/utils/routerSkip.js';
import { findDnHs, pdaReport } from '@/api/api.js'
import { useStore } from "vuex";

//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

components: {
	superweiCombox,
		searchCustom,
		calendarCustom
}
let store = useStore();
let calendarCustomRef = ref(null);
let data = reactive({
	chooseTime: [],
	oddNum: '',
	selectId: '',
	selectText: '',
	list: [],
	listShow: [],
	page: 1,
	rows: 20,
	isFinish: false,
	noticeHooks: false,
	isLoading:false,
	backList:[]
});
const {
	ctx
} = getCurrentInstance();
onMounted(() => {
	pdaReportList()
	getSystemTimeRequest()
})
const getSystemTimeRequest = () => {
	store.dispatch('getSystemTimeRequest')
		.then(res => {
			//   console.log(res, '----param-----')
			if (res.length) {
				data.chooseTime.push(res)
			}
		})
}

const select = (e) => {
	// console.log(e.id);
	// console.log(e.name);
	data.selectId = e.id;
	data.selectText = e.name;
}

const pdaReportList = () => {
	pdaReport({
		startDateTime: data.chooseTime[0] || '',
		endDateTime: data.chooseTime[1] ? data.chooseTime[1] : (data.chooseTime[0] || ''),
		barcode: data.oddNum,
		type: 'otherOutgoingOrders',
		page: data.page,
		rows: data.rows
	}).then(res => {
		// console.log(res)
		data.isLoading = false
		if (res.status == 200) {
			data.noticeHooks = false
			const rows = res.data.rows;
			rows.forEach(x => {
				rows.listShow = false
			})
			if(data.page==1){
				if (rows.length == 0) {
					data.noticeHooks = true
				}
				data.list = rows
			}else{
				data.list.push(...rows)
				// if(data.list.length == res.data.total){
				// 	data.noticeHooks = true
				// }else{
				// 	data.list.push(...rows)
				// }
			}
			data.noticeHooks = data.list.length >= res.data.total
			data.isFinish = data.list.length >= res.data.total;
			console.log(data.list)
		} else {
			uni.showToast({ title: res.message, icon: "none" });
		}
	})
}

const search = () => {
	data.page = 1
	data.list = []
	pdaReportList()
}
// 下拉加载
const scrolltolowerFn = () => {
	if (!data.noticeHooks) {
		data.page++
		data.isLoading = true;
		pdaReportList()
	}
}
const reset = () => {
	data.chooseTime = []
	data.oddNum = ''
	data.page = 1;
	data.list=[]
	// search()
}
const dateChoose = () => {
	calendarCustomRef.value.open();
}
const getTime = (times) => {
	data.chooseTime = times;
}
</script>

<style lang="scss" scoped>
.body-item-title {
	// width: 140rpx!important;
}

.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.scroll {
	flex: 1;
	height: 2rpx;
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
}

.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}
</style>
